
<template>
  <div class="home-container">
    <div class="banner-box">
      <canvas id="qrccode-canvas" />
    </div>
    <div class="btn-wrap">
      <input
        v-model="codeVal"
        type="textarea"
        hidden
      >
      <!-- <button @click="createQrc">点击生成二维码</button> -->
    </div>
  </div>
</template>
<script>
var QRCode = require('qrcode')
var canvas = { with: 256, height: 256 }
export default {
  name: 'QcCode',
  props: ['codeVal'],
  data() {
    return {
      bannerUrl: ''
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
      // DOM操作
      canvas = document.getElementById('qrccode-canvas')
      this.createQrc()
    })
  },
  methods: {
    createQrc: function() {
      if (!this.codeVal) {
        window.alert('链接不能为空')
        return false
      }
      QRCode.toCanvas(canvas, this.codeVal, error => {
        if (error) {
          console.log(error)
        } else {
          console.log('success')
        }
      })
    }
  }
}
</script>
<style>
.home-container {
  height: 500px;
}
.banner-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.btn-wrap {
  width: 280px;
  height: 280px;
  margin: 0 auto;
}
.btn-wrap textarea {
  width: 260px;
  height: 260px;
}
.qrcode_box {
  width: 4rem !important;
  height: 4rem !important;
  margin: rem(40) auto 0;
}
.qrcode_box .qrcode {
  width: 4rem !important;
  height: 4rem !important;
}
canvas {
  width: 256px;
  height: 256px;
}
</style>
